﻿
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Streamedian RTSP player example</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<style>
		body {
			max-width: 720px;
			margin: 50px auto;
		}

		#test_video {
			width: 720px;
		}

		.controls {
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		input.input, .form-inline .input-group > .form-control {
			width: 300px;
		}

		.logs {
			overflow: auto;
			width: 720px;
			height: 150px;
			padding: 5px;
			border-top: solid 1px gray;
			border-bottom: solid 1px gray;
		}

		button {
			margin: 5px
		}
	</style>
</head>
<body>
	<div id="sourcesNode"></div>
	<div>
		<input id="stream_url" size="36" value="rtsp://183.245.248.207:9090/dss/monitor/param?cameraid=1000014%240&substream=1">
		<button id="set_new_url">Set</button>
	</div>
	<div>
		<p style="color:#808080">Enter your rtsp link to the stream, for example: "rtsp://192.168.1.1:554/h264"</p>
	</div>

	<div>
		<input id="buffer_duration" type="range" min="10" max="200" style="width:40%;">
		<span id="buffer_value">120sec.</span>
	</div>

	<div>
		<p style="color:#808080">Change buffer duration</p>
	</div>

	<video id="test_video" controls autoplay>
		<!--<source src="rtsp://192.168.10.205:554/ch01.264" type="application/x-rtsp">-->
		<!--<source src="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" type="application/x-rtsp">-->
	</video>

	<div class="controls form">
		<div>
			Playback rate:&nbsp;
			<input id="rate" class="input" type="range" min="0.5" max="5.0" value="1.0" step="0.5">
			<output for="rate" id="rate_res">live</output>
		</div>
		<div>
			<button id="to_end" class="btn btn-success">live</button>
		</div>
	</div>

	<p><br>Have any suggestions to improve our player? <br>Feel free to leave comments or ideas email: streamedian.player@gmail.com</p>
	<p>View HTML5 RTSP video player log</p>
	<div id="pllogs" class="logs"></div>
	<button class="btn btn-success" onclick="cleanLog(pllogs)">clear</button>
	<button class="btn btn-success" onclick="scrollset(pllogs, true)">scroll up</button>
	<button class="btn btn-success" onclick="scrollset(pllogs, false)">scroll down</button>
	<button id="scrollSetPl" class="btn btn-success" onclick="scrollswitch(pllogs)">Scroll off</button>
	<br /><br />

	<b>How to use the player in the global network</b>
	<p>
		With an empty license file, you can only watch the stream on your computer locally (intranet).<br />
		If you would like to stream into the global network please take a key to activate the license.<br />
		You have personal 1 month validity key in the personal cabinet.<br />
		To activate key, please, use the activation application that is placed:
	</p>
	<p>
		<b>Windows:</b> C:\Program Files\Streamedian\WS RTSP Proxy Server\activation_app<br />
		<b>Mac OS:</b> /Library/Application Support/Streamedian/WS RTSP Proxy Server/activation_app<br />
		<b>Linux (Ubunty, Debian, Centos, Fedora ):</b> /usr/bin/wsp/activation_app<br />
	</p>
	<p>For more information go to <a href="https://streamedian.com/docs/">documentation</a></p>

	<script src="free.player.1.8.4.js"></script> <!-- Path to player js-->

	<script>
		var scrollStatPl = true;
		var scrollStatWs = true;
		var pllogs = document.getElementById("pllogs");
		var wslogs = document.getElementById("wslogs");

		// define a new console
		var console = (function (oldConsole) {
			return {
				log: function () {
					oldConsole.log(newConsole(arguments, "black", "#A9F5A9"));
				},
				info: function () {
					oldConsole.info(newConsole(arguments, "black", "#A9F5A9"));
				},
				warn: function () {
					oldConsole.warn(newConsole(arguments, "black", "#F3F781"));
				},
				error: function () {
					oldConsole.error(newConsole(arguments, "black", "#F5A9A9"));
				}
			};
		}(window.console));

		function newConsole(args, textColor, backColor) {
			let text = '';
			let node = document.createElement("div");
			for (let arg in args) {
				text += ' ' + args[arg];
			}
			node.appendChild(document.createTextNode(text));
			node.style.color = textColor;
			node.style.backgroundColor = backColor;
			pllogs.appendChild(node);
			autoscroll(pllogs);
			return text;
		}

		//Then redefine the old console
		window.console = console;

		function cleanLog(element) {
			while (element.firstChild) {
				element.removeChild(element.firstChild);
			}
		}

		function autoscroll(element) {
			if (scrollStatus(element)) {
				element.scrollTop = element.scrollHeight;
			}
			if (element.childElementCount > 1000) {
				element.removeChild(element.firstChild);
			}
		}

		function scrollset(element, state) {
			if (state) {
				element.scrollTop = 0;
				scrollChange(element, false);
			} else {
				element.scrollTop = element.scrollHeight;
				scrollChange(element, true);
			}
		}

		function scrollswitch(element) {
			if (scrollStatus(element)) {
				scrollChange(element, false);
			} else {
				scrollChange(element, true);
			}
		}

		function scrollChange(element, status) {
			if (scrollStatus(element)) {
				scrollStatPl = false;
				document.getElementById("scrollSetPl").innerText = "Scroll on";
			} else {
				scrollStatPl = true;
				document.getElementById("scrollSetPl").innerText = "Scroll off";
			}
		}

		function scrollStatus(element) {
			if (element.id === "pllogs") {
				return scrollStatPl;
			} else {
				return scrollStatWs;
			}
		}


	</script>

	<script>
		if (window.Streamedian) {
			let errHandler = function (err) {
				alert(err.message);
			};

			let infHandler = function (inf) {
				let sourcesNode = document.getElementById("sourcesNode");
				let clients = inf.clients;
				sourcesNode.innerHTML = "";

				for (let client in clients) {
					clients[client].forEach((sources) => {
						let nodeButton = document.createElement("button");
						nodeButton.setAttribute('data', sources.url + ' ' + client);
						nodeButton.appendChild(document.createTextNode(sources.description));
						nodeButton.onclick = (event) => {
							setPlayerSource(event.target.getAttribute('data'));
						};
						sourcesNode.appendChild(nodeButton);
					});
				}
			};

			var playerOptions = {
				socket: "ws://localhost:49239/ws/", redirectNativeMediaErrors: true,
				bufferDuration: 30,
				errorHandler: errHandler,
				infoHandler: infHandler
			};

			var html5Player = document.getElementById("test_video");
			var urlButton = document.getElementById("set_new_url");
			var urlEdit = document.getElementById("stream_url");
			var bufferRange = document.getElementById("buffer_duration");
			var bufferValue = document.getElementById("buffer_value");

			var player = Streamedian.player('test_video', playerOptions);
			var nativePlayer = document.getElementById('test_video');
			var range = document.getElementById('rate');
			var set_live = document.getElementById('to_end');
			var range_out = document.getElementById('rate_res');

			range.addEventListener('input', function () {
				nativePlayer.playbackRate = range.value;
				range_out.innerHTML = `x${range.value}`;
			});
			set_live.addEventListener('click', function () {
				range.value = 1.0;
				range_out.innerHTML = `live`;
				nativePlayer.playbackRate = 1;
				nativePlayer.currentTime = nativePlayer.buffered.end(0);
			});

			var updateRangeControls = function () {
				bufferRange.value = player.bufferDuration;
				bufferValue.innerHTML = bufferRange.value + "sec.";
			};

			bufferRange.addEventListener('input', function () {
				var iValue = parseInt(this.value, 10);
				player.bufferDuration = iValue;
				bufferValue.innerHTML = this.value + "sec.";
			});

			bufferRange.innerHTML = player.bufferDuration + "sec.";
			updateRangeControls();

			urlButton.onclick = () => {
				setPlayerSource(urlEdit.value);
			};

			function setPlayerSource(newSource) {
				player.destroy();
				player = null;
				html5Player.src = newSource;
				player = Streamedian.player("test_video", playerOptions);
				updateRangeControls();
			}
		}
	</script>
</body>
</html>
